<template>
  <div>
    <!-- 期刊 -->
    <div class="main">
      <div class="home-main">
        <div class="content">
          <div class="sm-content" v-for="(item,index) in dataList" :key="index">
            <img @click="goToRead(item)" :src="paperImgSrc+(item.cover).substring(0,4)+'.jpg'" />
            <span>{{item.name}}</span>
            <div class="sele" v-show="options" @click="delopt(item)">
              <img src="../../../../../static/shujia/xunzhong.png" alt="" width="25px" height="25px" v-if="item.active" />
              <img src="../../../../../static/shujia/null.png" alt="" width="25px" height="25px" v-else />
            </div>
          </div>
        </div>
      </div>
      <div class="delbook" @click="delbookinfo()" v-show="options">
        <!--<img src="../../../../../static/discover/delbook.png" width="44px" height="40" />-->
        删除收藏
      </div>
    </div>
  </div>
</template>

<script>
import api from "./../../../../api/api.js";
import baseurl from "./../../../../api/baseurl.js";
import { Indicator, MessageBox, Toast } from "mint-ui";
export default {
  props: ["options"],
  data() {
    return {
      dataList: [],
      pageIndex: 1
    };
  },
  created() {
    this.paperImgSrc = api.paperImgSrc;
    this.userId = localStorage.getItem("userid");
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.prePushTime = this.datevalue.substring(0, 11); //取年月日
    this.getinfo();
  },
  methods: {
    delopt(item) {
      if (this.options) {
        item.active = !item.active;
      }
    },
    delbookinfo() {
      const delbookid = [];
      for (let item of this.dataList) {
        if (item.active == true) {
          delbookid.push(item.id);
        }
      }
      const delid = delbookid.join(",");
      if (delid.length == 0) {
        Toast("请选择删除项");
        return;
      }
      MessageBox.confirm("", "确认删除收藏嘛？")
        .then(action => {
          this.$http({
            method: "post",
            url: baseurl.urls + "/collection/deleteCollection",
            params: {
              id: delid
            }
          })
            .then(response => {
              if (response.status == 200) {
                this.getinfo();
                Toast("删除收藏成功");
              }
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    },
    goToRead(item) {
      if(this.options){
        this.delopt(item)
      }else{
        console.log(item);
      this.$router.push({
        name: "newspapercontent",
        params: { parperdata: JSON.stringify(item), type: 2 }
      });
      }
    },
    getinfo() {
      this.$http({
        method: "post",
        url: baseurl.urls + "collection/selectCollection",
        params: {
          //收藏类型 例如：1 图书 2悦读 3 视听 4 报纸 5 期刊 ...
          userid: this.userId,
          pageNo: this.pageIndex,
          columntype: 4,
          pageSize: 30
        }
      })
        .then(response => {
          if (response.status == 200) {
            const dataList = response.data.date.list;
            dataList.map(book => (book.active = false));
            this.dataList = dataList;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.home-main {
  width: 100%;
  height: auto;
  margin-bottom: 1vh;
  margin-bottom: 13px;
}

.delbook {
  position: fixed;
  left: 0;
  bottom: 3px;
  background: skyblue;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 5vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.home-main .content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.home-main .content .sm-content {
  position: relative;
  margin-bottom: 15px;
  width: 45%;
  overflow: hidden;
}
/*选择图片*/
.sm-content .sele {
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0;
  top: 0;
}
.sm-content .sele img {
  width: 25px;
  height: 25px;
  box-shadow: none !important;
}
.content::after {
  content: " ";
  width: 45%;
}

.home-main .content .sm-content>img {
  height: 50px;
  width: 100%;
  border-radius: 10px;
  box-shadow: darkgrey 2px 2px 5px;
  /*background: darkorange;*/
}

.home-main .content .sm-content span {
  width: 100%;
  font-size: 14px;
}
</style>